// !题组列表
<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索框 + 按钮 -->
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                v-model="form.name"
                placeholder="根据编号搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="el-col-offset-12">
            <el-button @click="resetForm()">清除</el-button>
            <el-button type="primary" @click="getRandomList">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 灰色提示框 -->
      <el-alert :title="`数据一共${counts}条`" type="info" show-icon>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.questionType | tx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="185">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              v-for="(item, index) in scope.row.questionIDs"
              :key="index"
            >
              <div @click="had(item)">
                {{ item.number }}
              </div>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="180">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="150">
        </el-table-column>
        <el-table-column prop="userName" label="录入人" width="150">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="counts"
        :current-page="page"
        style="margin-top: 20px; text-align: right;"
      >
      </el-pagination>
    </el-card>
    <!-- 预览的弹层 -->
    <questions-preview ref="questionsPreview" :data="myid" />
  </div>
</template>

<script>
import QuestionsPreview from '../components/questions-preview'
import { questionType } from '@/api/hmmm/constants'
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  components: { QuestionsPreview },
  data() {
    return {
      form: {
        name: ''
      },
      isDialogShow: false, // 弹框的显示隐藏
      tableData: [], // 列表渲染的数据
      page: 1, // 当前页数
      pagesize: 20, // 页尺寸
      counts: 0, // 总条数
      myid: {}
    }
  },
  filters: {
    tx(value) {
      if (value) return questionType.find(item => item.value === +value).label
    }
  },
  methods: {
    // 获取组题列表
    async getRandomList() {
      try {
        const { data } = await randoms({
          page: this.page, // 当前页数
          pagesize: this.pagesize, // 页尺寸
          keyword: this.form.name // 关键字
        })
        console.log(data)
        this.tableData = data.items
        this.counts = data.counts
      } catch (err) {
        console.log(err)
      }
    },
    // 点击数字直接翻页
    handleCurrentChange(val) {
      this.page = val
      this.getRandomList()
    },
    // 选择每页显示条数
    handleSizeChange(val) {
      this.pagesize = val
      this.getRandomList()
    },
    // 删除按钮,index 是下标，row是
    async handleEdit(index, row) {
      const resultConfirm = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (resultConfirm !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      await removeRandoms(row)
      this.$message.success('删除成功')
      // 刷新列表
      this.getRandomList()
    },
    // 清除表单数据
    resetForm() {
      this.form.name = ''
      this.getRandomList()
    },
    // 展开弹出层
    had(row) {
      console.log(row)
      this.myid = row
      this.$nextTick(() => {
        this.$refs.questionsPreview.open()
      })
    }
  },
  created() {
    this.getRandomList()
  }
}
</script>

<style scoped lang="less">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  margin: 10px 15px;
}
.el-input__inner {
  width: 240px !important;
}
.el-col-offset-12 {
  margin-right: -165px;
}
.el-alert {
  margin-bottom: 15px;
}
</style>
